<template>
  <div class="search-box">
    <el-input v-model="query.key" placeholder="标题" class="search-input mr10" clearable></el-input>
    <el-button type="primary" :icon="Search" @click="handleSearch">搜索</el-button>
  </div>
  <div class="image-container">
    <div class="epc-card" v-for="(item, index) in tableData" @click="choose(item)">
      <el-card style="width: 400px;max-height: 500px;">
        <template #header>{{ item.title }}</template>
        <img :src="item.coverUrl" style="width: 100%"/>
      </el-card>
    </div>
    <div class="pagination">
      <el-pagination background layout="total, prev, pager, next" :current-page="query.page"
                     :page-size="query.size" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
    </div>
  </div>

</template>

<script lang="ts" setup>
import {ref, reactive} from 'vue';
import video from '../api/video'
import {Search} from '@element-plus/icons-vue';

const tableData = ref<TableItem[]>([]);
const pageTotal = ref(0);

interface TableItem {
  id: number;
  title: string;
  resourceUrl: string;
  des: string;
  publishTime: string;
  insertTime: string;
  coverUrl: string;
}

const query = reactive({
  key: '',
  page: 1,
  size: 6
});


const getData = () => {
  video.selectPages(query, (res) => {
    if (res.code === 200) {
      console.log(res)
      tableData.value = res.data.list;
      pageTotal.value = Number(res.data.total) || 50;
    }
  });
};

getData();

const props = defineProps({
  update: {
    type: Function,
    required: true
  },
  updateTable: {
    type: Function,
    required: true
  }

});

const choose = (item) => {
  props.update(item, props.updateTable);
}

// 查询操作
const handleSearch = () => {
  query.page = 1;
  getData();
};
// 分页导航
const handlePageChange = (val: number) => {
  query.page = val;
  getData();
};

</script>

<style>
.search-box {
  margin-bottom: 20px;
}

.search-input {
  margin-right: 10px;
  width: 500px;
}

.image-container {
  width: 100%;
  max-height: 900px;

  .epc-card {
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
  }
}
</style>
